{extend name="layout/base" /}

{block name="css"}
<style>
/* 名片生成器特定样式 */
.card-generator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 20px;
}

.form-section {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f3f4;
}

.preview-section {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f3f4;
    position: sticky;
    top: 100px;
    height: fit-content;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

.card-preview {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.card-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.company-info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-top: 12px;
}

.company-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin-right: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.company-details h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
}

.company-details p {
    color: #6c757d;
    font-size: 14px;
    margin: 0;
}

.personal-info {
    border-top: 2px solid #f1f3f4;
    padding-top: 20px;
}

.personal-info p {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
}

.personal-info strong {
    color: #495057;
    min-width: 60px;
    font-weight: 600;
}

.info-value {
    color: #2c3e50;
    flex: 1;
}

.no-preview {
    text-align: center;
    color: #6c757d;
    padding: 60px 20px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    background-color: #f8f9fa;
}

.no-preview-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.image-preview-container {
    text-align: center;
    margin-top: 24px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e9ecef;
}

.image-preview {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    color: white;
    text-decoration: none;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #f1f3f4;
}



/* 表单验证样式 */
.form-control.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.required {
    color: #dc3545;
}

/* 表单输入焦点时清除错误状态 */
.form-control.error:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(44, 90, 160, 0.25);
}

/* 模板选择器样式 */
.template-selector {
    margin-top: 8px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.template-item {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
}

.template-item:hover {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.template-item.selected {
    border-color: #667eea;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.template-item.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.template-preview {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
}

.template-name {
    text-align: center;
    font-weight: 500;
    color: #495057;
    font-size: 13px;
}

/* 经典商务模板 */
.template-classic {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #dee2e6;
    padding: 8px;
}

.template-classic .template-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e9ecef;
}

.template-classic .template-logo {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    margin-right: 6px;
    border-radius: 4px;
}

.template-classic .company-name {
    font-weight: bold;
    font-size: 9px;
    color: #2c3e50;
}

.template-classic .company-address {
    font-size: 7px;
    color: #6c757d;
}

.template-classic .template-info {
    font-size: 8px;
}

.template-classic .info-item {
    margin-bottom: 2px;
    color: #495057;
}

/* 现代简约模板 */
.template-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    padding: 8px;
}

.template-modern .template-side {
    width: 40%;
    padding-right: 6px;
    border-right: 1px solid rgba(255,255,255,0.3);
}

.template-modern .side-logo {
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 8px;
    margin-bottom: 4px;
}

.template-modern .name {
    font-weight: bold;
    font-size: 9px;
    margin-bottom: 2px;
}

.template-modern .title {
    font-size: 7px;
    opacity: 0.9;
}

.template-modern .template-main {
    flex: 1;
    padding-left: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.template-modern .company {
    font-weight: bold;
    font-size: 8px;
}

.template-modern .contact {
    font-size: 7px;
    opacity: 0.9;
}

.template-modern .contact div {
    margin-bottom: 1px;
}

/* 优雅风格模板 */
.template-elegant {
    background: #ffffff;
    border: 1px solid #d4af37;
    position: relative;
    padding: 8px;
}

.template-elegant .elegant-border {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #d4af37;
    border-radius: 4px;
}

.template-elegant .elegant-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4px;
}

.template-elegant .elegant-name {
    font-weight: bold;
    font-size: 10px;
    color: #2c3e50;
    margin-bottom: 3px;
}

.template-elegant .elegant-title {
    font-size: 8px;
    color: #d4af37;
    margin-bottom: 4px;
}

.template-elegant .elegant-company {
    font-size: 8px;
    color: #495057;
    margin-bottom: 4px;
}

.template-elegant .elegant-contacts {
    font-size: 7px;
    color: #6c757d;
}

.template-elegant .elegant-contacts span {
    display: block;
    margin-bottom: 1px;
}

/* 创意设计模板 */
.template-creative {
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    position: relative;
    overflow: hidden;
    padding: 8px;
    color: white;
}

.template-creative .creative-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.template-creative .creative-circle {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}

.template-creative .creative-triangle {
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 0;
    height: 0;
    border-left: 20px solid rgba(255,255,255,0.1);
    border-bottom: 20px solid transparent;
}

.template-creative .creative-content {
    position: relative;
    z-index: 1;
}

.template-creative .creative-name {
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 2px;
}

.template-creative .creative-role {
    font-size: 8px;
    opacity: 0.9;
    margin-bottom: 3px;
}

.template-creative .creative-company {
    font-size: 8px;
    margin-bottom: 4px;
}

.template-creative .creative-contact {
    font-size: 7px;
    opacity: 0.9;
}

.template-creative .creative-contact div {
    margin-bottom: 1px;
}

/* 极简风格模板 */
.template-minimal {
    background: #ffffff;
    border: 1px solid #e9ecef;
    padding: 8px;
}

.template-minimal .minimal-header {
    margin-bottom: 6px;
}

.template-minimal .minimal-name {
    font-weight: bold;
    font-size: 11px;
    color: #2c3e50;
    margin-bottom: 2px;
}

.template-minimal .minimal-line {
    height: 2px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    width: 30px;
}

.template-minimal .minimal-title {
    font-size: 8px;
    color: #6c757d;
    margin-bottom: 3px;
}

.template-minimal .minimal-company {
    font-size: 8px;
    color: #495057;
    margin-bottom: 4px;
}

.template-minimal .minimal-contacts {
    font-size: 7px;
    color: #6c757d;
}

.template-minimal .minimal-contacts div {
    margin-bottom: 1px;
}

/* 渐变时尚模板 */
.template-gradient {
    position: relative;
    overflow: hidden;
    padding: 8px;
    color: white;
}

.template-gradient .gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.template-gradient .gradient-content {
    position: relative;
    z-index: 1;
}

.template-gradient .gradient-name {
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.template-gradient .gradient-title {
    font-size: 8px;
    opacity: 0.9;
    margin-bottom: 3px;
}

.template-gradient .gradient-company {
    font-size: 8px;
    margin-bottom: 4px;
}

.template-gradient .gradient-contact {
    font-size: 7px;
    opacity: 0.9;
}

.template-gradient .gradient-contact div {
    margin-bottom: 1px;
}

@media (max-width: 1024px) {
    .card-generator {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .preview-section {
        position: static;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .company-info {
        flex-direction: column;
        text-align: center;
    }
    
    .company-logo {
        margin: 0 auto 16px;
    }
}
</style>
{/block}

{block name="content"}
<div class="page-container">
    <div class="page-header">
        <h1 class="page-title">
            <span>📇</span>
            名片生成器
        </h1>
        <p class="page-subtitle">填写您的信息，生成专业的电子名片</p>
    </div>
    
    <div class="card-generator">
        <!-- 表单区域 -->
        <div class="form-section">
            <h2 class="section-title">个人信息</h2>
            <form id="cardForm">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="name">姓名 <span class="required">*</span></label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="请输入您的姓名" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="phone">电话 <span class="required">*</span></label>
                        <input type="tel" id="phone" name="phone" class="form-control" placeholder="请输入电话号码" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="email">邮箱 <span class="required">*</span></label>
                    <input type="email" id="email" name="email" class="form-control" placeholder="请输入邮箱地址" required>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="department_id">部门 <span class="required">*</span></label>
                        <select id="department_id" name="department_id" class="form-control form-select" required>
                            <option value="">请选择部门</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="position_id">岗位 <span class="required">*</span></label>
                        <select id="position_id" name="position_id" class="form-control form-select" required>
                            <option value="">请选择岗位</option>
                        </select>
                    </div>
                </div>
                
                <!-- 名片模板选择 -->
                <div class="form-group">
                    <label class="form-label">名片模板 <span class="required">*</span></label>
                    <div class="template-selector">
                        <div class="template-grid">
                            <div class="template-item" data-template="classic">
                                <div class="template-preview template-classic">
                                    <div class="template-header">
                                        <div class="template-logo">Logo</div>
                                        <div class="template-company">
                                            <div class="company-name">公司名称</div>
                                            <div class="company-address">公司地址</div>
                                        </div>
                                    </div>
                                    <div class="template-info">
                                        <div class="info-item"><strong>张三</strong></div>
                                        <div class="info-item">技术部 · 高级工程师</div>
                                        <div class="info-item">📱 138-0000-0000</div>
                                        <div class="info-item">✉️ zhang@company.com</div>
                                    </div>
                                </div>
                                <div class="template-name">经典商务</div>
                            </div>
                            
                            <div class="template-item" data-template="modern">
                                <div class="template-preview template-modern">
                                    <div class="template-side">
                                        <div class="side-logo">L</div>
                                        <div class="side-info">
                                            <div class="name">张三</div>
                                            <div class="title">高级工程师</div>
                                        </div>
                                    </div>
                                    <div class="template-main">
                                        <div class="company">公司名称</div>
                                        <div class="contact">
                                            <div>📱 138-0000-0000</div>
                                            <div>✉️ zhang@company.com</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="template-name">现代简约</div>
                            </div>
                            
                            <div class="template-item" data-template="elegant">
                                <div class="template-preview template-elegant">
                                    <div class="elegant-border"></div>
                                    <div class="elegant-content">
                                        <div class="elegant-name">张三</div>
                                        <div class="elegant-title">技术部 · 高级工程师</div>
                                        <div class="elegant-company">公司名称</div>
                                        <div class="elegant-contacts">
                                            <span>📱 138-0000-0000</span>
                                            <span>✉️ zhang@company.com</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="template-name">优雅风格</div>
                            </div>
                            
                            <div class="template-item" data-template="creative">
                                <div class="template-preview template-creative">
                                    <div class="creative-bg">
                                        <div class="creative-circle"></div>
                                        <div class="creative-triangle"></div>
                                    </div>
                                    <div class="creative-content">
                                        <div class="creative-name">张三</div>
                                        <div class="creative-role">高级工程师</div>
                                        <div class="creative-company">公司名称</div>
                                        <div class="creative-contact">
                                            <div>📱 138-0000-0000</div>
                                            <div>✉️ zhang@company.com</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="template-name">创意设计</div>
                            </div>
                            
                            <div class="template-item" data-template="minimal">
                                <div class="template-preview template-minimal">
                                    <div class="minimal-header">
                                        <div class="minimal-name">张三</div>
                                        <div class="minimal-line"></div>
                                    </div>
                                    <div class="minimal-body">
                                        <div class="minimal-title">技术部 · 高级工程师</div>
                                        <div class="minimal-company">公司名称</div>
                                        <div class="minimal-contacts">
                                            <div>📱 138-0000-0000</div>
                                            <div>✉️ zhang@company.com</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="template-name">极简风格</div>
                            </div>
                            
                            <div class="template-item" data-template="gradient">
                                <div class="template-preview template-gradient">
                                    <div class="gradient-bg"></div>
                                    <div class="gradient-content">
                                        <div class="gradient-name">张三</div>
                                        <div class="gradient-title">高级工程师</div>
                                        <div class="gradient-company">公司名称</div>
                                        <div class="gradient-contact">
                                            <div>📱 138-0000-0000</div>
                                            <div>✉️ zhang@company.com</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="template-name">渐变时尚</div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="template" name="template" value="classic" required>
                </div>
                
                <div class="form-actions">
                    <button type="button" id="previewBtn" class="btn btn-preview">
                        <span>👁️</span>
                        预览名片
                    </button>
                    <button type="button" id="generateBtn" class="btn btn-generate">
                        <span>🎨</span>
                        生成图片
                    </button>
                </div>
            </form>
        </div>
        
        <!-- 预览区域 -->
        <div class="preview-section">
            <h2 class="section-title">实时预览</h2>
            <div id="previewContainer">
                <div class="no-preview">
                    <div class="no-preview-icon">📋</div>
                    <p>请填写信息并点击预览按钮</p>
                </div>
            </div>
            
            <div id="imagePreviewContainer" class="image-preview-container hidden">
                <img id="imagePreview" class="image-preview" src="" alt="名片预览">
                <br>
                <a id="downloadLink" href="" class="download-btn">
                    <span>💾</span>
                    下载名片图片
                </a>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
$(document).ready(function() {
    // 加载部门列表
    loadDepartments();
    
    // 部门变化时加载对应岗位
    $('#department_id').change(function() {
        let departmentId = $(this).val();
        loadPositions(departmentId);
        // 清除错误状态
        $(this).removeClass('error');
        $(this).closest('.form-group').find('.error-message').remove();
    });
    
    // 模板选择功能
    $('.template-item').click(function() {
        // 移除其他模板的选中状态
        $('.template-item').removeClass('selected');
        // 添加当前模板的选中状态
        $(this).addClass('selected');
        // 设置隐藏字段的值
        let templateType = $(this).data('template');
        $('#template').val(templateType);
        // 清除错误状态
        $(this).closest('.form-group').find('.error-message').remove();
        
        // 如果当前已有预览数据，更新预览样式
        updatePreviewIfExists();
    });
    
    // 默认选中第一个模板
    $('.template-item[data-template="classic"]').addClass('selected');
    
    // 根据模板类型生成预览HTML
    function generateTemplatePreview(cardData, templateType) {
        switch(templateType) {
            case 'classic':
                return `
                    <div class="card-preview template-classic" style="height: 300px; padding: 20px;">
                        <div class="template-header" style="display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e9ecef;">
                            <div class="template-logo" style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; margin-right: 15px; border-radius: 8px;">Logo</div>
                            <div class="template-company">
                                <div class="company-name" style="font-weight: bold; font-size: 16px; color: #2c3e50; margin-bottom: 5px;">${cardData.company_name}</div>
                                <div class="company-address" style="font-size: 12px; color: #6c757d;">${cardData.company_address}</div>
                            </div>
                        </div>
                        <div class="template-info" style="font-size: 14px;">
                            <div class="info-item" style="margin-bottom: 8px;"><strong style="color: #495057;">${cardData.name}</strong></div>
                            <div class="info-item" style="margin-bottom: 8px; color: #6c757d;">${cardData.department} · ${cardData.position}</div>
                            <div class="info-item" style="margin-bottom: 8px; color: #495057;">📱 ${cardData.phone}</div>
                            <div class="info-item" style="margin-bottom: 8px; color: #495057;">✉️ ${cardData.email}</div>
                        </div>
                    </div>
                `;
            
            case 'modern':
                return `
                    <div class="card-preview template-modern" style="height: 300px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; padding: 20px;">
                        <div class="template-side" style="width: 40%; padding-right: 15px; border-right: 2px solid rgba(255,255,255,0.3);">
                            <div class="side-logo" style="width: 50px; height: 50px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 20px; margin-bottom: 15px;">L</div>
                            <div class="side-info">
                                <div class="name" style="font-weight: bold; font-size: 16px; margin-bottom: 5px;">${cardData.name}</div>
                                <div class="title" style="font-size: 12px; opacity: 0.9;">${cardData.position}</div>
                            </div>
                        </div>
                        <div class="template-main" style="flex: 1; padding-left: 15px; display: flex; flex-direction: column; justify-content: space-between;">
                            <div class="company" style="font-weight: bold; font-size: 14px;">${cardData.company_name}</div>
                            <div class="contact" style="font-size: 12px; opacity: 0.9;">
                                <div style="margin-bottom: 5px;">📱 ${cardData.phone}</div>
                                <div style="margin-bottom: 5px;">✉️ ${cardData.email}</div>
                                <div>${cardData.department}</div>
                            </div>
                        </div>
                    </div>
                `;
            
            case 'elegant':
                return `
                    <div class="card-preview template-elegant" style="height: 300px; background: #ffffff; border: 2px solid #d4af37; position: relative; padding: 20px;">
                        <div class="elegant-border" style="position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid #d4af37; border-radius: 8px;"></div>
                        <div class="elegant-content" style="position: relative; z-index: 1; text-align: center; padding: 15px;">
                            <div class="elegant-name" style="font-weight: bold; font-size: 18px; color: #2c3e50; margin-bottom: 10px;">${cardData.name}</div>
                            <div class="elegant-title" style="font-size: 14px; color: #d4af37; margin-bottom: 15px;">${cardData.department} · ${cardData.position}</div>
                            <div class="elegant-company" style="font-size: 14px; color: #495057; margin-bottom: 15px;">${cardData.company_name}</div>
                            <div class="elegant-contacts" style="font-size: 12px; color: #6c757d;">
                                <div style="margin-bottom: 5px;">📱 ${cardData.phone}</div>
                                <div>✉️ ${cardData.email}</div>
                            </div>
                        </div>
                    </div>
                `;
            
            case 'creative':
                return `
                    <div class="card-preview template-creative" style="height: 300px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); position: relative; overflow: hidden; padding: 20px; color: white;">
                        <div class="creative-bg" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
                            <div class="creative-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: rgba(255,255,255,0.1); border-radius: 50%;"></div>
                            <div class="creative-triangle" style="position: absolute; bottom: -10px; left: -10px; width: 0; height: 0; border-left: 40px solid rgba(255,255,255,0.1); border-bottom: 40px solid transparent;"></div>
                        </div>
                        <div class="creative-content" style="position: relative; z-index: 1;">
                            <div class="creative-name" style="font-weight: bold; font-size: 18px; margin-bottom: 8px;">${cardData.name}</div>
                            <div class="creative-role" style="font-size: 14px; opacity: 0.9; margin-bottom: 10px;">${cardData.position}</div>
                            <div class="creative-company" style="font-size: 14px; margin-bottom: 15px;">${cardData.company_name}</div>
                            <div class="creative-contact" style="font-size: 12px; opacity: 0.9;">
                                <div style="margin-bottom: 5px;">📱 ${cardData.phone}</div>
                                <div style="margin-bottom: 5px;">✉️ ${cardData.email}</div>
                                <div>${cardData.department}</div>
                            </div>
                        </div>
                    </div>
                `;
            
            case 'minimal':
                return `
                    <div class="card-preview template-minimal" style="height: 300px; background: #ffffff; border: 1px solid #e9ecef; padding: 20px;">
                        <div class="minimal-header" style="margin-bottom: 20px;">
                            <div class="minimal-name" style="font-weight: bold; font-size: 20px; color: #2c3e50; margin-bottom: 8px;">${cardData.name}</div>
                            <div class="minimal-line" style="height: 3px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); width: 60px;"></div>
                        </div>
                        <div class="minimal-body">
                            <div class="minimal-title" style="font-size: 14px; color: #6c757d; margin-bottom: 10px;">${cardData.department} · ${cardData.position}</div>
                            <div class="minimal-company" style="font-size: 14px; color: #495057; margin-bottom: 15px;">${cardData.company_name}</div>
                            <div class="minimal-contacts" style="font-size: 12px; color: #6c757d;">
                                <div style="margin-bottom: 5px;">📱 ${cardData.phone}</div>
                                <div>✉️ ${cardData.email}</div>
                            </div>
                        </div>
                    </div>
                `;
            
            case 'gradient':
                return `
                    <div class="card-preview template-gradient" style="height: 300px; position: relative; overflow: hidden; padding: 20px; color: white;">
                        <div class="gradient-bg" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);"></div>
                        <div class="gradient-content" style="position: relative; z-index: 1;">
                            <div class="gradient-name" style="font-weight: bold; font-size: 18px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">${cardData.name}</div>
                            <div class="gradient-title" style="font-size: 14px; opacity: 0.9; margin-bottom: 10px;">${cardData.position}</div>
                            <div class="gradient-company" style="font-size: 14px; margin-bottom: 15px;">${cardData.company_name}</div>
                            <div class="gradient-contact" style="font-size: 12px; opacity: 0.9;">
                                <div style="margin-bottom: 5px;">📱 ${cardData.phone}</div>
                                <div style="margin-bottom: 5px;">✉️ ${cardData.email}</div>
                                <div>${cardData.department}</div>
                            </div>
                        </div>
                    </div>
                `;
            
            default:
                return generateTemplatePreview(cardData, 'classic');
        }
    }
    
    // 更新预览（如果已有预览数据）
    function updatePreviewIfExists() {
        // 检查是否已有预览内容且不是默认的"请填写信息"状态
        const previewContainer = $('#previewContainer');
        if (previewContainer.find('.card-preview').length > 0 && !previewContainer.find('.no-preview').length) {
            // 重新触发预览
            previewCard();
        }
    }
    
    // 输入框失去焦点时清除错误状态
    $('.form-control').on('blur input change', function() {
        if ($(this).val().trim()) {
            $(this).removeClass('error');
            $(this).closest('.form-group').find('.error-message').remove();
        }
    });
    
    // 预览按钮点击事件
    $('#previewBtn').click(function() {
        previewCard();
    });
    
    // 生成图片按钮点击事件
    $('#generateBtn').click(function() {
        generateImage();
    });
    
    // 加载部门列表
    function loadDepartments() {
        $.ajax({
            url: '/department/getList',
            type: 'GET',
            dataType: 'json',
            success: function(res) {
                if (res.code === 1) {
                    let departments = res.data;
                    let options = '<option value="">请选择部门</option>';
                    departments.forEach(function(dept) {
                        options += `<option value="${dept.id}">${dept.name}</option>`;
                    });
                    $('#department_id').html(options);
                } else {
                    showMessage('加载部门失败: ' + res.msg, 'error');
                }
            },
            error: function() {
                showMessage('加载部门失败', 'error');
            }
        });
    }
    
    // 加载岗位列表
    function loadPositions(departmentId) {
        if (!departmentId) {
            $('#position_id').html('<option value="">请选择岗位</option>');
            return;
        }
        
        $.ajax({
            url: '/position/getList',
            type: 'GET',
            data: { department_id: departmentId },
            dataType: 'json',
            success: function(res) {
                if (res.code === 1) {
                    let positions = res.data;
                    let options = '<option value="">请选择岗位</option>';
                    positions.forEach(function(pos) {
                        options += `<option value="${pos.id}">${pos.name}</option>`;
                    });
                    $('#position_id').html(options);
                } else {
                    showMessage('加载岗位失败: ' + res.msg, 'error');
                }
            },
            error: function() {
                showMessage('加载岗位失败', 'error');
            }
        });
    }
    
    // 表单验证
    function validateForm() {
        let isValid = true;
        let errors = [];
        
        // 清除之前的错误样式
        $('.form-control').removeClass('error');
        $('.error-message').remove();
        
        // 验证姓名
        const name = $('#name').val().trim();
        if (!name) {
            showFieldError('#name', '请输入姓名');
            errors.push('姓名不能为空');
            isValid = false;
        }
        
        // 验证电话
        const phone = $('#phone').val().trim();
        if (!phone) {
            showFieldError('#phone', '请输入电话号码');
            errors.push('电话号码不能为空');
            isValid = false;
        } else if (!/^1[3-9]\d{9}$/.test(phone) && !/^0\d{2,3}-?\d{7,8}$/.test(phone)) {
            showFieldError('#phone', '请输入正确的电话号码格式');
            errors.push('电话号码格式不正确');
            isValid = false;
        }
        
        // 验证邮箱
        const email = $('#email').val().trim();
        if (!email) {
            showFieldError('#email', '请输入邮箱地址');
            errors.push('邮箱地址不能为空');
            isValid = false;
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showFieldError('#email', '请输入正确的邮箱格式');
            errors.push('邮箱格式不正确');
            isValid = false;
        }
        
        // 验证部门
        const departmentId = $('#department_id').val();
        if (!departmentId) {
            showFieldError('#department_id', '请选择部门');
            errors.push('请选择部门');
            isValid = false;
        }
        
        // 验证岗位
        const positionId = $('#position_id').val();
        if (!positionId) {
            showFieldError('#position_id', '请选择岗位');
            errors.push('请选择岗位');
            isValid = false;
        }
        
        if (!isValid) {
            showMessage('请完善表单信息：\
' + errors.join('\
'), 'error');
        }
        
        return isValid;
    }
    
    // 显示字段错误
    function showFieldError(fieldSelector, message) {
        const field = $(fieldSelector);
        field.addClass('error');
        
        // 添加错误消息
        const errorDiv = $('<div class="error-message">' + message + '</div>');
        field.closest('.form-group').append(errorDiv);
    }
    
    // 预览名片
    function previewCard() {
        // 先验证表单
        if (!validateForm()) {
            return;
        }
        
        let formData = $('#cardForm').serialize();
        const previewBtn = document.getElementById('previewBtn');
        
        setLoading(previewBtn, true);
        
        $.ajax({
            url: '/card/generateData',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(res) {
                if (res.code === 1) {
                    let cardData = res.data;
                    let selectedTemplate = $('#template').val() || 'classic';
                    let previewHtml = generateTemplatePreview(cardData, selectedTemplate);
                    $('#previewContainer').html(previewHtml);
                } else {
                    showMessage('预览失败: ' + res.msg, 'error');
                }
            },
            error: function() {
                showMessage('预览失败', 'error');
            },
            complete: function() {
                setLoading(previewBtn, false);
            }
        });
    }
    
    // 生成名片图片
    function generateImage() {
        // 先验证表单
        if (!validateForm()) {
            return;
        }
        
        let formData = $('#cardForm').serialize();
        const generateBtn = document.getElementById('generateBtn');
        
        setLoading(generateBtn, true);
        
        $.ajax({
            url: '/card/generateImage',
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(res) {
                if (res.code === 1) {
                    let imagePath = res.data.image_path;
                    let filename = imagePath.split('/').pop();
                    
                    let viewImageUrl = '/card/viewImage?filename=' + filename;
                    
                    $('#imagePreview').attr('src', viewImageUrl + '&t=' + new Date().getTime())
                        .on('load', function() {
                            console.log('图片加载成功');
                        })
                        .on('error', function() {
                            console.error('图片加载失败');
                            showMessage('图片预览加载失败，请检查网络连接', 'error');
                        });
                    
                    $('#downloadLink').attr('href', '/card/downloadImage/' + filename);
                    $('#imagePreviewContainer').removeClass('hidden');
                    showMessage('图片生成成功！您可以预览和下载名片。', 'success');
                } else {
                    showMessage('生成图片失败: ' + res.msg, 'error');
                }
            },
            error: function(xhr, status, error) {
                console.error('请求失败:', error);
                showMessage('生成图片失败，请检查网络连接', 'error');
            },
            complete: function() {
                setLoading(generateBtn, false);
            }
        });
    }
});
</script>
{/block}